<!-- 新建实物奖品 -->
<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" width="40%">
    <template #title>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <span v-if="vdata.isAdd">新增机构小程序</span>
        <span v-else>修改机构小程序</span>
      </div>
    </template>
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :rules="vdata.rules"
      :colon="false"
      :wrapper-col="{ span: 22 }"
      style="margin-top: 30px; margin-left: 20px; padding-bottom: 30px"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="appid" name="appId">
            <a-input v-model:value="vdata.saveObject['appId']" :disabled="!vdata.isAdd" placeholder="请输入appid" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="appsecret" name="appSecret">
            <a-input v-model:value="vdata.saveObject['appSecret']" :disabled="!vdata.isAdd" :placeholder="vdata['appSecretPlaceholder']" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="小程序名称" name="name">
            <a-input v-model:value="vdata.saveObject['name']" :placeholder="'请输入小程序名称'" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="机构" name="agentNo" :wrapper-col="{ span: 22 }">
            <GzTreeSelect ref="gzThreeRef" v-model:value="vdata.saveObject['agentNo']" :disabled="!vdata.isAdd" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="小程序二维码" name="imgUrl" :wrapper-col="{ span: 23 }">
            <GzUpload v-model:src="vdata.saveObject['imgUrl']" bizType="WeChat" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="福分规则" name="scoreRule" :wrapper-col="{ span: 23 }">
            <GzUpload v-model:src="vdata.saveObject['scoreRule']" bizType="WeChat" />
          </a-form-item>
        </a-col>
        <a-col span="11">
          <a-form-item label="是否已解除绑定" name="isDeleted">
            <a-radio-group v-model:value="vdata.saveObject['isDeleted']" @change="changeFuncDeleted">
              <a-radio :value="0">否</a-radio>
              <a-radio :value="1">是</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col span="11">
          <a-form-item label="是否为默认应用" name="isDefault">
            <a-radio-group v-model:value="vdata.saveObject['isDefault']" :disabled="!vdata.isAdd" @change="changeFuncDefault">
              <a-radio :value="0">否</a-radio>
              <a-radio :value="1">是</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="隐私政策" name="privacyPolicy" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['privacyPolicy']" :rows="4" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="服务协议" name="serviceAgreement" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['serviceAgreement']" :rows="4" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['remark']" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="()=>{vdata.visible = false}">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import {$apiAgentAppAdd,$apiAgentAppUpdate,$apiAgentAppDetail} from '@/api/proxy/programManage/lite/index'
import { reactive, ref, defineExpose, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const formRef = ref()
const gzThreeRef = ref()

const props = defineProps(['callbackFunc'])

const vdata:any = reactive({
  isAdd: false, // 新增OR修改
  visible: false,
  btnLoading: true,
  saveObject: {
    isDeleted:0,
    isDefault:0
  },
  rules: {
    appId: [{ required: true, message: 'appid不能为空', trigger: 'blur' },],
    appSecret: [{ required: true, message: 'appsecret不能为空', trigger: 'blur' },],
    name: [{ required: true, message: '小程序名称不能为空', trigger: 'blur' },],
    authUrl: [{ required: true, message: '公众号获取open_id配置的url不能为空', trigger: 'blur' },],
    imgUrl: [{ required: true, message: '公众号二维码不能为空', trigger: 'blur' },],
    scoreRule: [{ required: true, message: '请上传福分规则图片', trigger: 'blur' },],
    agentNo: [{ required: true, message: '机构不能为空', trigger: 'blur' },],
    privacyPolicy: [{ required: true, message: '隐私政策不能为空', trigger: 'blur' },],
    serviceAgreement: [{ required: true, message: '服务协议不能为空', trigger: 'blur' },],
    remark: [{ required: true, message: '备注不能为空', trigger: 'blur' },],
  },
})


function changeFunc(e){
  const awardType = vdata.saveObject.awardType
  vdata.component = awardType === 0 ? CouponDetail : (awardType === 1 ? GoodsDetail : VirtualCouponDetail)
  vdata.selectedRowKeys = []
}
// 是否已解除绑定
function changeFuncDeleted (e){
  vdata.saveObject.isDeleted = e.target.value
  console.log(e.target.value)
}
// 是否为默认应用
function changeFuncDefault (e){
  console.log(e.target.value)
  vdata.saveObject.isDefault = e.target.value
}

function handleOkFunc() {
  formRef.value.validate().then(()=>{
    vdata.btnLoading = true
    let message = vdata.isAdd ? '新增成功' : '修改成功'
    // let method = vdata.isAdd ? 'POST' : 'PUT'
    if(vdata.isAdd){
      // 新增
      // let message = '新增成功'
      $apiAgentAppAdd(vdata.saveObject).then(res=>{
        $infoBox.message.success(message)
        props.callbackFunc()
        vdata.visible = false
      }).finally(()=>{
        vdata.btnLoading = false
      }).catch(()=>{})
    }else{
      // 编辑
      // let message = '修改成功'
      const payload = { // 修改不需要传appId,appSecret,agentNo
        ...vdata.saveObject,
        appId: null,
        appSecret: null,
        agentNo: null,
        isDefault: null
      }
      $apiAgentAppUpdate(payload).then(res=>{
        $infoBox.message.success(message)
        props.callbackFunc()
        vdata.visible = false
      }).finally(()=>{
        vdata.btnLoading = false
      }).catch(()=>{})
    }
})
}

async function show(record) {
  vdata.isAdd = !record
  // 重置数据
  vdata.btnLoading = false
  vdata.saveObject = {
    type: 1,
    isDefault:0,//是否为默认应用
    isDeleted:0,//是否已解除绑定
  }
  clearFieldValidate()

  if(vdata.isAdd){ // 新增
    vdata.appSecretPlaceholder = '请输入appsecret'
    vdata.rules.appSecret = [{ required: true, message: 'appsecret不能为空', trigger: 'blur' },]
  }else{  // 修改
    const detail = await $apiAgentAppDetail({ agentAppId: record.agentAppId })
    vdata.appSecretPlaceholder = detail.appSecret
    Object.assign(vdata.saveObject, {
      ...detail,
      appSecret: null,
    })
    delete vdata.rules.appSecret
  }
  vdata.visible = true
}
// 清除字段验证
function clearFieldValidate(){
  if (formRef.value !== undefined) {
    formRef.value.clearValidate()
  }
}

defineExpose({
  show,
})
</script>

<style lang="less" scoped>
.rule{
  display: flex;
  align-items: center;
  gap: 20px;
  *{
    flex-shrink: 0;
  }
  &:nth-child(n + 2){
    margin-top: 10px;
  }
}
.cp{
  cursor: pointer;
}
.fz18{
  font-size: 18px;
}
</style>
